<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../static/plugins/bootstrap-3.4.1-dist/css/bootstrap.min.css" />
		<style type="text/css">
			.img{
				width: 25px;
				height: 25px;
				margin-right: 5px;
			}
		</style>
	</head>
	<body style="background: #d1d8e0;">
		<div class="panel panel-default mypanel" style="position: absolute; width: 90%;left: 5%;top: 20px;">
			<div class="panel-heading" style="background: #dff0d8;">员工表</div>
			<div class="panel-body">

				<table class="table table-hover">
					<thead>
						<tr>
							<th>#</th>
							<th>姓名</th>
							<th>性别</th>
							<!-- <th>出生日期</th> -->
							<th>手机号</th>
							<th>工资</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						{% for item in data%}
						<tr>

							<td class="id">{{item.ENO}}</td>
							<td class="name">{{item.ENAME}}</td>
							<td class="sex">{{item.ESEX}}</td>
							<!-- <td class="age">{{item.EBIRTH}}</td> -->
							<td class="phone">{{item.EPHONE}}</td>
							<td class="wages">{{item.wages}}</td>
							<td>
								<div class="" style="display: flex;">
									<a  id="edit_btn" onclick="getattr({{item}})"><img src="../../static/img/employee/icon/edit.png" class="img-responsive img" alt="Responsive image"></a>
									<a  href="/employee_delete?id={{item.ENO}}"><img src="../../static/img/employee/icon/delete.png" class="img-responsive img" alt="Responsive image"></a>
								</div>
								
							</td>
						</tr>
						{% endfor %}

					</tbody>
				</table>


				<a class="btn btn-success" id="add_btn" style="font-size: 25px;line-height: 1.1;">+</a>

				<div class="modal fade" id="createFileMModal" role="dialog" aria-labelledby="exampleModalLabel"
					aria-hidden="true">
					<div class="modal-dialog" role="document">
						<div class="modal-content">
							<div class="modal-header">
								<h5 class="modal-title" id="createFileTitle">创建文件</h5>
								<button type="button" class="close" data-dismiss="modal" aria-label="Close">
									<span aria-hidden="true">&times;</span>
								</button>
							</div>
							<div class="modal-body">
								<form>
									<div class="form-group info_group">
										<label for="fileName" class="col-form-label">姓名</label>
										<input type="text" autofocus class="form-control" id="name">
										<label for="fileName" class="col-form-label">性别</label>
										<input type="text" autofocus class="form-control" id="sex">
										<!-- <label for="fileName" class="col-form-label">出生日期</label>
										<input type="text" autofocus class="form-control" id="age"> -->
										<label for="fileName" class="col-form-label">手机号</label>
										<input type="text" autofocus class="form-control" id="phone">
										<label for="fileName" class="col-form-label">工资</label>
										<input type="text" autofocus class="form-control" id="wages">
									</div>
								</form>
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-primary" id="createFileSureBut"
									onclick="submit()">确定</button>
							</div>
						</div>
					</div>
				</div>




			</div>
		</div>
		<script src="../../static/js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../static/plugins/bootstrap-3.4.1-dist/js/bootstrap.js" type="text/javascript" charset="utf-8">
		</script>
		<script type="text/javascript">
			
			var mode = 1
			var id = 1

			function ShowCreateModal(title) {
				$("#createFileTitle").text(title);
				$('#createFileMModal').modal('show');
			}

			function alterData(flag) {
				var name = $("#name").val();
				// var age = $("#age").val();
				var sex = $("#sex").val();
				var phone = $("#phone").val();
				var wages = $("#wages").val();
				if (flag == 1) //增加数据
				{
					location.href = '/employee_insert?name=' + name +  '&sex=' + sex + '&phone=' + phone+'&wages=' + wages
					console.log('已发送')
				} else if (flag == 2) //修改数据
				{
					location.href = '/employee_edit?id=' + id + '&name=' + name +  '&sex=' + sex + '&phone=' +
						phone+'&wages=' + wages
				}
			}

			function submit() {
				alterData(mode)
				$("#createFileMModal").modal("hide")
				//alert('更改成功！')
			}

			$('#add_btn').click(function() {
				mode = 1
				ShowCreateModal('添加数据')
			})





			function getattr(item) {
				//console.log('你好')
				mode = 2
				console.log(item)
				id = item.ENO
				var name = item.ENAME
				// var age = item.EBIRTH
				//console.log(typeof(item.EBIRTH))
				
				var sex = item.ESEX
				var phone = item.EPHONE
				var wages = item.wages


				$('#name').val(name)
				// $('#age').val(age)
				$('#sex').val(sex)
				$('#phone').val(phone)
				$('#wages').val(wages)
				ShowCreateModal('修改员工信息')
				//console.log(id, name, age, sex, phone)
			}



			$(function() {
				// $('#delete').click(function(res){
				// 	console.log(res)
				// })
				// 修改弹出框的title, 显示弹框


			})
		</script>
	</body>
</html>
